<template>
  <ee-radio class="ee-tabbar fc">
    <template #checked="{checked}">
      <router-link class="fc" p="1" :to="to">
        <ee-icon :icon="icon?.constructor != String ? icon(checked) : icon" />
        <slot></slot>
      </router-link>
    </template>
    <template #default><template v-if="false"></template></template>
  </ee-radio>
</template>

<script type="text/javascript">
import radio from "../__mixin/select/radio"
export default {
  name: "ee-tabbar",
  mixins: [radio],
  props: {
    /** router-link的to属性，填有to时，url和to相同则默认于激活 */
    to: String,
    /** 展示图标
     * 可以传入方法根据是否点亮显示不同的icon
     * @type {string | function(boolean)}
     * @example
     * <ee-tabbar :icon="i => checked ? 'icon1' : 'icon2'">用户</tabbar>
     */
    icon: [String, Function],
  },
}
</script>

<style lang="scss">
.ee-tabbar {
  flex: 1;
  font-size: .75em;

  &[active] {
    color: var(--ee-tabbar-color);
  }

  i {
    font-size: 2em;
  }
}
</style>